<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'Chart1',
    props: {
      chartData: {
        type: Array,
        default: () => [
          { name: '区域1', data: [120, 132, 101, 134, 90, 230, 210], color: '#5DACE3' },
          { name: '区域2', data: [220, 182, 191, 234, 290, 330, 310], color: '#5de3af' },
          { name: '区域3', data: [150, 232, 201, 154, 190, 330, 410], color: '#e35d86' }
        ]
      },
      xAxisData: {
        type: Array,
        default: () => ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    },
    mounted() {
      this.initChart();
      window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
      window.removeEventListener('resize', this.handleResize);
      if (this.chart) {
        this.chart.dispose();
      }
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chartContainer);

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: this.chartData.map(item => item.name),
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            }
          },
          series: this.chartData.map(item => ({
            name: item.name,
            type: 'line',
            data: item.data,
            smooth: true,
            lineStyle: {
              color: item.color
            }
          }))
        };

        this.chart.setOption(option);
      },
      handleResize() {
        this.chart && this.chart.resize();
      }
    }
  };
</script>

<style scoped>
  .chart-container {
    width: 100%;
    height: 200px;
    transition: all 0.3s ease;
  }
</style>